<script setup>
import {onMounted, ref} from 'vue'
import * as echarts from 'echarts' 

const chart = ref()
onMounted(()=>{
  chartInit()
})
function chartInit(){
   // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(chart.value);
      var option = {
        tooltip:{
          trigger:'item'
        },
          series: [
            {
              name: '车型分类',
              type: 'pie',
              radius: [20, 90],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              label:{
                fontSize: 14,
                fontWeight:'bold',
                color:'#fff'
              },
              data: [
                { value: 40, name: '租凭乘用车' },
                { value: 38, name: 'rose 2' },
                { value: 32, name: 'rose 3' },
                { value: 30, name: 'rose 4' },
                { value: 28, name: 'rose 5' },
                { value: 26, name: 'rose 6' },
                { value: 22, name: 'rose 7' },
                { value: 18, name: 'rose 8' }
              ]
            }
          ]
      };
      myChart.setOption(option);
}
</script>

<template>
  <div class="boxstyle" style="height:230px">
      <div class="title">车型分类</div>
      <div ref="chart" style="width: 100%;height:180px;"></div>
</div>

</template>
<style scoped>

</style>